<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../layui/jquery-3.2.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../layui/jquery.query.js"></script>
    <script src="js/customer.js"></script>
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container">
    <div style="height: 70px"><h1 style="text-align: center">客户管理</h1></div>
    <table class="layui-table">
        <thead>
        <tr><th>客户名称</th><th>负责人</th><th>经营范围</th><th>操作</th></tr>
        </thead>
        <tbody id="CustomerDiv"></tbody>
    </table>
    <div id="cutPageDiv"></div>
    <div class="layui-row">
        <div class="layui-col-md8" style="text-align: center">
            <div><a href="javascript:addCustomer()" class="layui-btn layui-btn-normal">添加客户</a></div><br>
            <!--<div><a href="javascript:updateCustomer()" class="layui-btn layui-btn-normal">修改客户信息</a></div><br>-->
            <!--<div><a href="javascript:findAllCustomer()" class="layui-btn layui-btn-normal">查看客户信息</a></div><br>-->
        </div>
        <div class="layui-col-md3">
            <fieldset>
                <legend>查询客户信息</legend>
                <form id="f1">
                    <div style="height: 50px">客户名称：<input type="text" name="name" id="name"><br></div>
                    <div style="height: 50px">经营范围：<input type="text" name="scope" id="scope"><br></div>
                    <div style="text-align: right"><a href="javascript:findByItem(1)" class="layui-btn layui-btn-normal">
                        <i class="layui-icon layui-icon-search"></i>
                        查询</a></div>
                </form>
            </fieldset>
        </div>
        <div class="layui-col-md1" style="display: none">1</div>
    </div>
</div>
</div>
<!--添加弹出层-->
<div style="display: none" id="addDiv">
    <form id="addForm" class="layui-form" style="text-align: center">
        <div style="height: 50px"><h2>添加客户信息</h2></div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户名称：</label>
            <div class="layui-input-inline" style="display: flex;flex-direction: row">
                <input type="text" id="customerName" name="name" style="width: 150px;height: 30px" class="layui-input" placeholder="客户名称"><div id="nameError"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">负责人名：</label>
            <div class="layui-input-inline" style="display: flex;flex-direction: row">
                <input type="text" id="inCharge" name="inCharge" style="width: 150px;height: 30px" class="layui-input" placeholder="负责人名"><div id="inchargeError"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">负责电话：</label>
            <div class="layui-input-inline" style="display: flex;flex-direction: row">
                <input type="text" id="tel" name="tel" style="width: 150px;height: 30px" class="layui-input" placeholder="负责电话"><div id="telError"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">办公地址：</label>
            <div class="layui-input-inline" style="display: flex;flex-direction: row">
                <input type="text" id="address" name="address" style="width: 150px;height: 30px" class="layui-input" placeholder="办公地址"><div id="addressError"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱地址：</label>
            <div class="layui-input-inline" style="display: flex;flex-direction: row">
                <input type="text" id="email" name="email" style="width: 150px;height: 30px" class="layui-input" placeholder="邮箱地址"><div id="emailError"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">经营范围：</label>
            <div class="layui-input-inline" style="display: flex;flex-direction: row">
                <input type="text" id="range" name="scope" style="width: 150px;height: 30px" class="layui-input" placeholder="经营范围"><div id="scopeError"></div>
            </div>
        </div>
        <input class="layui-btn layui-btn-normal" type="button" value="添加" onclick="addCustomerAll()">
    </form>
</div>

<!--修改信息弹出层-->
<div style="display:none" id="updateDiv">
    <form id="updateForm" style="text-align:center">
        <input type="hidden" name="id" id="idValue">
        <div style="height: 50px"><h2>修改供应商信息</h2></div>
        <div style="margin-bottom:20px">
            客户名称：<span id="supplierNameSpan" ></span></span><br>
        </div>
        <div style="margin-bottom:20px">
            负责人名：<input type="text" name="inCharge" id="principal2"><br>
        </div>
        <div style="margin-bottom:20px">
            负责电话：<input type="text" name="tel" id="tel2"><br>
        </div>
        <div style="margin-bottom:20px">
            供应地址：<span id="placesSpan" ></span><br>
        </div>
        <div style="margin-bottom:20px">
            邮箱地址：<span id="emailSpan1" ></span><br>
        </div>
        <div style="margin-bottom:20px">
            经营范围：<input type="text" name="scope" id="scope2"><br>
        </div>
        <a class="layui-btn layui-btn-warm" href="javascript:update123()">修改</a>
    </form>
</div>

<!--查询弹出层-->
<div style="display: none" id="findAllDiv">
    <form id="findForm" style="text-align: center">
        <div style="height: 50px"><h2>供应商信息详情</h2></div>
        <div style="margin-bottom:20px">
            供应名称：<span id="supplierNameSpan2"></span></span><br>
        </div>
        <div style="margin-bottom:20px">
            负责人名：<span id="principalSpan"></span><br>
        </div>
        <div style="margin-bottom:20px">
            负责电话：<span id="telSpan1"></span><br>
        </div>
        <div style="margin-bottom:20px">
            供应地址：<span id="placesSpan2"></span><br>
        </div>
        <div style="margin-bottom:20px">
            邮箱地址：<span id="emailSpan2"></span><br>
        </div>
        <div style="margin-bottom:20px">
            经营范围：<span id="scopeSpan2"></span><br>
        </div>
        <a class="layui-btn layui-btn-warm" onclick="layer.closeAll()">确定</a>
    </form>
</div>
</body>
</html>